<template>
    <div class="url-container">
        <div class="control-panel">
            <n-radio-group v-model:value="mode" class="mode-select">
                <n-radio-button key="encode" value="encode">编码</n-radio-button>
                <n-radio-button key="decode" value="decode">解码</n-radio-button>
            </n-radio-group>
        </div>

        <div class="content-panel">
            <!-- 输入区域 -->
            <div class="input-section">
                <div class="section-header">
                    <span>输入</span>
                    <div class="actions">
                        <n-button quaternary size="small" @click="clearInput">
                            清空
                        </n-button>
                    </div>
                </div>
                <n-input
                    v-model:value="inputText"
                    type="textarea"
                    :autosize="{ minRows: 5, maxRows: 10 }"
                    :placeholder="mode === 'encode' ? '请输入要编码的文本' : '请输入要解码的URL文本'"
                />
            </div>

            <!-- 输出区域 -->
            <div class="output-section">
                <div class="section-header">
                    <span>输出</span>
                    <div class="actions">
                        <n-button quaternary size="small" @click="copyOutput" :disabled="!outputText">
                            复制
                        </n-button>
                        <n-button quaternary size="small" @click="clearOutput" :disabled="!outputText">
                            清空
                        </n-button>
                    </div>
                </div>
                <n-input
                    v-model:value="outputText"
                    type="textarea"
                    :autosize="{ minRows: 5, maxRows: 10 }"
                    readonly
                    placeholder="输出结果将显示在这里"
                />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import view from '@renderer/util/ui/ViewUtil'

// 模式：编码/解码
const mode = ref<'encode' | 'decode'>('encode')
// 输入文本
const inputText = ref('')
// 输出文本
const outputText = ref('')

// 使用防抖函数来避免频繁处理
const debounce = (fn: Function, delay: number) => {
    let timer: number | null = null
    return (...args: any[]) => {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(null, args)
        }, delay) as unknown as number
    }
}

// 自动处理函数
const autoProcess = debounce(() => {
    try {
        if (mode.value === 'encode') {
            outputText.value = encodeURIComponent(inputText.value)
        } else {
            outputText.value = decodeURIComponent(inputText.value)
        }
    } catch (error) {
        view.alertErrorMessage(mode.value === 'encode' ? '编码失败' : '解码失败')
        console.error('URL处理失败:', error)
    }
}, 300)

// 监听输入变化
watch(inputText, () => {
    if (inputText.value.trim()) {
        autoProcess()
    } else {
        outputText.value = ''
    }
})

// 监听模式变化，清空内容并重新处理
watch(mode, () => {
    // 清空输入和输出
    clearInput()
})

// 复制输出
const copyOutput = async () => {
    try {
        await navigator.clipboard.writeText(outputText.value)
        view.alertSuccessMessage('复制成功')
    } catch {
        view.alertErrorMessage('复制失败')
    }
}

// 清空输入
const clearInput = () => {
    inputText.value = ''
    outputText.value = ''
}

// 清空输出
const clearOutput = () => {
    outputText.value = ''
}
</script>

<style scoped>
.url-container {
    height: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.control-panel {
    display: flex;
    gap: 16px;
    align-items: center;
}

.content-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

.input-section,
.output-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.actions {
    display: flex;
    gap: 8px;
}
</style>